<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_editFeatureAttachments"></title>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <style>
        .editPane {
            position: absolute;
            right: 65px;
            top: 8px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
            border-radius: 4px;
        }

        .attachmentFile {
            width: 225px;
        }

        .leaflet-popup-scrollable {
            overflow: auto;
        }

        .leaflet-popup {
            width: 280px;
            font-size: 14px;
            min-height: 100px;
            max-height: 200px;
        }
    </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
    <div id="map" style="width: 100%;height:100%"></div>
    <div class="panel panel-primary editPane" id="editPane">
        <div class='panel-heading'>
            <h5 class='panel-title text-center' data-i18n="resources.text_editSingle"></h5>
        </div>
        <div class='panel-body content file' style="padding-bottom: 0;">
            <input type='file' id="attachmentFile" class='btn btn-default attachmentFile'
                data-i18n="[value]resources.btn_addMarker" />&nbsp;
        </div>
        <div class='panel-body content'>
            <input id="getAttachmentsInput" type='button' class='btn btn-default'
                data-i18n="[value]resources.text_getAttachments" onclick='getAttachments()' />
            <input id="resetFileInput" type='button' class='btn btn-default' data-i18n="[value]resources.btn_undoAdd"
                onclick='resetFile()' />
            <input id="commitInput" type='button' class='btn btn-default'
                data-i18n="[value]resources.text_input_value_submit" onclick='commit()' />&nbsp;
        </div>
    </div>
    <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    <script type="text/javascript">
        var map, featureId, vectorSource, resultLayer,
            host = window.isLocal ? window.server : "https://iserver.supermap.io",
            baseUrl = host + "/iserver/services/map-world/rest/maps/World",
            url = host + "/iserver/services/data-world/rest/data",
            fileDom = document.getElementById('attachmentFile'),
            getAttachmentsInputDom = document.getElementById('getAttachmentsInput'),
            resetFileInputDom = document.getElementById('resetFileInput'),
            commitInputDom = document.getElementById('commitInput'),
            file,
            showPosition,
            lastTarget,
            showPosition;
        map = L.map('map', {
            preferCanvas: true,
            crs: L.CRS.EPSG4326,
            center: { lon: 0, lat: 0 },
            maxZoom: 18,
            zoom: 2
        });
        new L.supermap.TiledMapLayer(baseUrl).addTo(map);

        initFeature()

        function initFeature() {
            setDisabledAndTips(true, resources.msg_noFeature);
            var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
                queryParameter: {
                    name: "Countries@World",
                    attributeFilter: "SMID > 0"
                },
                datasetNames: ["World:Countries"]
            });
            new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(serviceResult => {
                resultLayer = L.geoJSON(serviceResult.result.features, {
                    onEachFeature: function (feature, layer) {
                        layer.on({
                            click: (e) => {
                                if (lastTarget) {
                                    resultLayer.resetStyle(lastTarget);
                                };
                                if (e.target) {
                                    lastTarget = e.target;
                                    setDisabledAndTips(false, '');
                                    showPosition = e.target.getCenter();
                                };
                                featureId = feature.properties.SMID;
                                let layer = e.target;
                                layer.setStyle({
                                    weight: 3,
                                    color: 'red',
                                    dashArray: '',
                                })
                            }
                        })

                    }
                }).addTo(map)
            });
        }
        function getAttachments() {
            new L.supermap.DatasetService(url).getDataset("World", "Countries", function (serviceResult) {
                if (!serviceResult.result.supportAttachments) {
                    return widgets.alert.showAlert(resources.msg_notSupportAttachments, false);
                }
                var params = new L.supermap.AttachmentsParameters({
                    dataSourceName: "World",
                    dataSetName: "Countries",
                    featureId: featureId
                });
                new L.supermap.FeatureService(url).getFeatureAttachments(params).then(res => {
                    results = res.result;
                    let innerHTML = '';
                    if (results.length > 0) {
                        results.forEach(function (result) {
                            var link = `${url}/datasources/${params.dataSourceName}/datasets/${params.dataSetName}/features/${params.featureId}/attachments/${result.id}`;
                            innerHTML += resources.text_attachmentFileName + ": " + "<a href=" + link + ">" + result.name + "</a>" + "<br>";
                            innerHTML += resources.text_attachmentFileType + ": " + result.contentType + "<br>";
                            innerHTML += resources.text_attachmentFileSize + ": " + result.size / 1024 + " KB";
                            innerHTML += "<hr>";
                        })
                    }
                    L.popup({
                        minWidth: 180,
                        maxWidth: 800,
                        minHeight: 100,
                        maxHeight: 200,
                    })
                        .setLatLng(showPosition)
                        .setContent(innerHTML || resources.text_noData)
                        .openOn(map);
                });
            })
        }

        function setDisabledAndTips(disabled, tooltip) {
            fileDom.disabled = disabled;
            getAttachmentsInputDom.disabled = disabled;
            resetFileInputDom.disabled = disabled;
            commitInputDom.disabled = disabled;

            fileDom.setAttribute("title", tooltip);
            getAttachmentsInputDom.setAttribute("title", tooltip);
            resetFileInputDom.setAttribute("title", tooltip);
            commitInputDom.setAttribute("title", tooltip);
        }
        function resetFile() {
            fileDom.value = '';
            file = null;
        }
        function commit() {
            new L.supermap.DatasetService(url).getDataset("World", "Countries", function (serviceResult) {
                if (!serviceResult.result.supportAttachments) {
                    return widgets.alert.showAlert(resources.msg_notSupportAttachments, false);
                };
                file = fileDom.files[0];
                if (file) {
                    var params = new L.supermap.EditAttachmentsParameters({
                        dataSourceName: "World",
                        dataSetName: "Countries",
                        featureId: featureId,
                        file: file,
                        editType: 'add'
                    });
                    new L.supermap.FeatureService(url).editFeatureAttachments(params).then(serviceResult => {
                        resetFile();
                        return widgets.alert.showAlert(resources.msg_submitSuccess, true);
                    });
                } else {
                    return widgets.alert.showAlert(resources.msg_noAttachment, false);
                }
            })
        }

    </script>
</body>

</html>